<!-- # CE - camunda-bpm-webapp/ui/admin/client/scripts/pages/userEdit.html -->
<section>
  <aside>
    <ul>
      <li ng-class="activeClass('profile')">
        <a href="#/users/{{user.id | escape}}?tab=profile">{{ 'USERS_PROFILE' | translate }}</a>
      </li>

      <li ng-class="activeClass('account')"
          ng-show="availableOperations.update">
        <a href="#/users/{{user.id | escape}}?tab=account">{{ 'USERS_ACCOUNT' | translate }}</a>
      </li>

      <li ng-class="activeClass('groups')">
        <a href="#/users/{{user.id | escape}}?tab=groups">{{ 'USERS_GROUPS' | translate }}</a>
      </li>

      <li ng-class="activeClass('tenants')">
        <a href="#/users/{{user.id | escape}}?tab=tenants">{{ 'USERS_TENANTS' | translate }}</a>
      </li>
    </ul>
  </aside>

  <div class="section-content">
    <header class="row">
      <div class="col-xs-8">
        <h3>{{ 'USERS_EDIT_USER' | translate }} {{user.firstName}} {{user.lastName}}</h3>
      </div>
      <div class="col-xs-4 text-right">
        <a class="btn btn-default"
           ng-if="show('groups')"
           ng-click="openCreateGroupMembershipDialog()">
          {{ 'USERS_ADD_TO_A_GROUP' | translate }}
          <span class="glyphicon glyphicon-plus-sign"></span>
        </a>

        <a class="btn btn-default"
           ng-if="show('tenants')"
           ng-click="openCreateTenantMembershipDialog()">
          {{ 'USERS_ADD_TO_A_TENANT' | translate }}
          <span class="glyphicon glyphicon-plus-sign"></span>
        </a>
      </div>
    </header>

    <div ng-if="show('profile')">
      <p ng-if="!profile">
        <span class="glyphicon glyphicon-loading"></span>
        {{ 'USERS_LOADING_PROFILE' | translate }}
      </p>

      <form class="form-horizontal"
            name="editProfileForm"
            ng-if="profile">
        <div class="h4">{{ 'USERS_PROFILE' | translate }}</div>

        <div class="form-group">
          <label class="control-label col-sm-4 col-md-2"
                 for="inputFirstname">{{ 'USERS_FIRSTNAME' | translate }}</label>

          <div class="col-sm-8 col-md-10">
            <input id="inputFirstname"
                   name="firstname"
                   class="form-control"
                   type="text"
                   ng-model="profile.firstName"
                   ng-disabled="!availableOperations.update"
                   novalidate
                   required/>

            <p class="help-block"
               ng-show="editProfileForm.firstname.$error.required">
              {{ 'USERS_FIRSTNAME_REQUIRED' | translate }}
            </p>
          </div>
        </div>

        <div class="form-group">
          <label class="control-label col-sm-4 col-md-2"
                 for="inputLastname">{{ 'USERS_LASTNAME' | translate }}</label>

          <div class="col-sm-8 col-md-10">
            <input id="inputLastname"
                   type="text"
                   class="form-control"
                   ng-model="profile.lastName"
                   ng-disabled="!availableOperations.update"
                   novalidate
                   required />

            <p class="help-block"
               ng-show="editProfileForm.firstname.$error.required">
              {{ 'USERS_LASTNAME_REQUIRED' | translate }}
            </p>
          </div>
        </div>

        <div class="form-group">
          <label class="control-label col-sm-4 col-md-2"
                 for="inputEmail">{{ 'USERS_EMAIL' | translate }}</label>

          <div class="col-sm-8 col-md-10">
            <input id="inputEmail"
                   name="email"
                   class="form-control"
                   type="text"
                   ng-model="profile.email"
                   ng-disabled="!availableOperations.update"
                   data-email />

            <p class="help-block"
               ng-show="editProfileForm.email.$error.email">
              {{ 'USERS_EMAIL_INVALID' | translate }}
            </p>
          </div>
        </div>

        <div class="form-group"
             ng-show="availableOperations.update">
          <div class="col-sm-8 col-sm-offset-4 col-md-10 col-md-offset-2 text-right">
            <button type="submit"
                    class="btn btn-primary"
                    ng-disabled="!canSubmit(editProfileForm, 'profile')"
                    ng-click="updateProfile()">
              {{ 'USERS_UPDATE_PROFILE' | translate }}
            </button>
          </div>
        </div>
      </form>
    </div>

    <div ng-if="show('account')">
      <form class="form-horizontal"
            ng-if="availableOperations.update"
            name="updateCredentialsForm">

        <div class="h4">{{ 'USERS_CHANGE_PASSWORD' | translate }}</div>

        <p>{{ 'USERS_TYPE_NEW_PASSWORD' | translate }}</p>

        <div class="form-group">
          <label class="control-label col-sm-4 col-md-2"
                 for="inputAuthenticationUserPassword"
                 ng-if="userId === authenticatedUser">
            {{ 'USERS_OLD_PASSWORD' | translate }}
          </label>

          <label class="control-label col-sm-4 col-md-2"
                 for="inputAuthenticationUserPassword"
                 ng-if="userId !== authenticatedUser">
            {{ currentUserPassword }}
          </label>

          <div class="col-sm-8 col-md-10">
            <input id="inputAuthenticationUserPassword"
                   name="inputAuthenticationUserPassword"
                   class="form-control"
                   type="password"
                   ng-model="credentials.authenticatedUserPassword"
                   required />
          </div>
        </div>

        <div class="form-group">
          <label class="control-label col-sm-4 col-md-2"
                 for="inputPassword">{{ 'USERS_NEW_PASSWORD' | translate }}</label>

          <div class="col-sm-8 col-md-10">
            <div cam-widget-password
                 cam-widget-password-profile="persistedProfile"
                 cam-widget-password-password="credentials.password"
                 cam-widget-password-valid="credentials.valid"></div>

            <p class="text-danger"
               ng-show="updateCredentialsForm.inputPassword.$error.password">
              {{ 'USERS_PASSWORD_INVALID' | translate }}
            </p>
          </div>
        </div>

        <div class="form-group">
          <label class="control-label col-sm-4 col-md-2"
              for="inputPasswordRepeat">{{ 'USERS_NEW_PASSWORD_REPEAT' | translate }}</label>

          <div class="col-sm-8 col-md-10">
            <input id="inputPasswordRepeat"
                   name="inputPasswordRepeat"
                   class="form-control"
                   type="password"
                   ng-model="credentials.password2"
                   data-password-repeat="credentials.password" />

            <p class="text-danger"
               ng-show="updateCredentialsForm.inputPasswordRepeat.$error.passwordRepeat">
              {{ 'USERS_PASSWORDS_NOT_EQUAL' | translate }}
            </p>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-8 col-sm-offset-4 col-md-10 col-md-offset-2 text-right">
            <button type="submit"
                    class="btn btn-primary"
                    ng-disabled="!canSubmit(updateCredentialsForm)"
                    ng-click="updateCredentials(updateCredentialsForm)">{{ 'USERS_CHANGE_PASSWORD' | translate }}</button>
          </div>
        </div>
      </form>


      <form class="form-horizontal"
            ng-if="availableOperations.delete">

        <div class="h4">{{ 'USERS_DELETE_USER' | translate }}</div>

        <div uib-alert class="alert alert-danger">
          <strong>{{ 'USERS_WARNING' | translate }}</strong> {{ 'USERS_DELETING_UNDONE' | translate }}
        </div>

        <div class="text-right">
          <button type="submit"
                  class="btn btn-danger"
                  ng-click="deleteUser()">
            {{ 'USERS_DELETE_USER' | translate }}
          </button>
        </div>
      </form>
      <form class="form-horizontal">
        <div class="h4">{{ 'USERS_UNLOCK_USER' | translate }}</div>
        <div uib-alert class="alert alert-info">
          <strong>{{ 'USERS_NOTICE' | translate }}</strong> {{ 'USERS_UNLOCKING_USER' | translate }}
        </div>
        <div class="text-right">
          <button type="submit"
                  class="btn btn-primary"
                  ng-click="unlockUser()">
            <span class="glyphicon glyphicon-lock"></span>
            {{ 'USERS_UNLOCK_USER' | translate }}
          </button>
        </div>
      </form>
    </div>

    <div ng-if="show('groups')">
      <form class="form-horizontal"
            name="updateGroupMemberships">

        <div class="h4"
             translate="USERS_FIRSTNAME_LASTNAME_GROUPS"
             translate-values='{firstname: user.firstName, lastname: user.lastName}'>
        </div>

        <div cam-widget-loader
             loading-state="{{ groupLoadingState }}"
             text-empty="{{ translate('USERS_NOT_MEMBER_GROUP', { firstname: user.firstName, lastname: user.lastName }) }}">
          <table class="cam-table"
                 ng-hide="groupList.length == 0">
            <thead cam-sortable-table-header
                   default-sort-by="id"
                   default-sort-order="asc"
                   sorting-id="admin-sorting-users-groups"
                   on-sort-change="onGroupsSortingChanged(sorting)">
              <tr>
                <th class="group-id"
                    cam-sortable-table-column
                    sort-by-property="id">{{ 'USERS_GROUP_ID' | translate }}</th>
                <th class="group-name"
                    cam-sortable-table-column
                    sort-by-property="name">{{ 'USERS_GROUP_NAME' | translate }}</th>
                <th class="group-type"
                    cam-sortable-table-column
                    sort-by-property="type">{{ 'USERS_GROUP_TYPE' | translate }}</th>
                <th class="action"
                    ng-show="availableOperations.removeGroup">
                  {{ 'USERS_ACTION' | translate }}
                </th>
              </tr>
            </thead>

            <tbody>
              <tr ng-repeat="group in groupList">
                <td class="group-id">
                  <a href="#/groups/{{group.id | escape}}?tab=group">{{group.id}}</a>
                </td>

                <td class="group-name">
                  {{group.name}}
                </td>

                <td class="group-type">
                  {{group.type}}
                </td>

                <td class="action"
                    ng-show="availableOperations.removeGroup">
                  <a ng-click="removeGroup(group.id)">{{ 'USERS_REMOVE' | translate }}</a>
                </td>
              </tr>
            </tbody>
          </table>
          <div cam-pagination="onPaginationChange(pages)" total="pages.total"></div>
        </div>

      </form>
    </div>

    <div ng-if="show('tenants')">
      <form class="form-horizontal"
            name="updateTenantMemberships">

        <div class="h4"
             translate="USERS_FIRSTNAME_LASTNAME_TENANTS"
             translate-values='{firstname: user.firstName, lastname: user.lastName}'>
        </div>

        <div cam-widget-loader
             loading-state="{{ tenantLoadingState }}"
             text-empty="{{ translate('USERS_NOT_MEMBER_TENTANT', { firstname: user.firstName, lastname: user.lastName }) }}">
          <table class="cam-table"
                 ng-hide="tenantList.length == 0">
            <thead cam-sortable-table-header
                   default-sort-by="id"
                   default-sort-order="asc"
                   sorting-id="admin-sorting-users-tenants"
                   on-sort-change="onTenantsSortingChanged(sorting)"
                   on-sort-initialized="onTenantsSortingChanged(sorting)">
            <tr>
              <th class="tenant-id"
                    cam-sortable-table-column
                    sort-by-property="id">{{ 'USERS_TENANT_ID' | translate }}</th>
              <th class="tenant-name"
                    cam-sortable-table-column
                    sort-by-property="name">{{ 'USERS_TENANT_NAME' | translate }}</th>
              <th class="action"
                  ng-show="availableOperations.removeTenant">
                {{ 'USERS_ACTION' | translate }}
              </th>
            </tr>
            </thead>

            <tbody>
            <tr ng-repeat="tenant in tenantList">
              <td class="tenant-id">
                <a href="#/tenants/{{ tenant.id | escape }}?tab=tenant">{{ tenant.id }}</a>
              </td>

              <td class="tenant-name">
                {{ tenant.name }}
              </td>

              <td class="action"
                  ng-show="availableOperations.removeTenant">
                <a ng-click="removeTenant(tenant.id)">{{ 'USERS_REMOVE' | translate }}</a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </form>
      <ul uib-pagination
          ng-if="tenantPages.total > tenantPages.size"
          class="pagination-sm"

          page="tenantPages.current"
          ng-model="tenantPages.current"
          ng-change="loadTenants()"

          total-items="tenantPages.total"
          items-per-page="tenantPages.size"

          max-size="7"
          boundary-links="true"></ul>
    </div>
  </div>
</section>
<!-- / CE - camunda-bpm-webapp/ui/admin/client/scripts/pages/userEdit.html -->
